<template>
    <el-card shadow="hover">
        <template #header>
            <div class="chartTitleStyle">
                <span>{{state.chartTitle}}</span>
            </div>
        </template>
        <div class="chartH" ref="chartRef"></div>
    </el-card>
</template>

<script lang="ts" setup>
    import {reactive, onMounted, watch, ref, defineExpose, getCurrentInstance, nextTick, onActivated} from "vue";
    import request, {get} from "/@/utils/request"
    import * as echarts from "echarts";
    import {useStore} from "/@/store/index";

    const {proxy} = getCurrentInstance() as any;
    const store = useStore();
    const props = defineProps({
        //chart图请求路由
        url: {
            type: String,
            default: "api/eco/summaryOrgInfo/getEchart"
        },
        //chart图请求参数
        queryJson: {
            type: Object,
            default: {}
        },
        chartTitle: {
            type: String,
            default: ""
        },
        dataTitle: {
            type: Array,
            default: []
        },
        dataUnit: {
            type: Array,
            default: []
        },
        columnName: {
            type: String,
            default: 'tax'
        }
    });
    const state = reactive({
        //chart图请求路由
        url: "",
        //chart图请求参数
        queryJson: {},
        //chart图返回值
        eChartData: {
            data: [],
            dataOver: [],
            dataTime: [],
        },
        chartTitle: "",
        dataTitle: [],
        charts: [],
        dataUnit: [],
    });
    const getData = () => {
        request({
            url: state.url,
            method: "get",
            params: {queryJson: JSON.stringify(state.queryJson)}
        }).then((res) => {
            state.eChartData.data = res.echartData.data;
            state.eChartData.dataOver = res.echartData.dataOver;
            state.eChartData.dataTime = res.echartData.dataTime;
            setTimeout(() => {
                renderEChart();
            }, 100)
        })
    }
    const renderEChart = () => {
        const chart = echarts.init(proxy.$refs.chartRef);
        const option = {
            grid: {
                top: 50,
                right: 20,
                bottom: 30,
                left: 30,
            },
            axisLabel: {
                margin: 2,
                formatter: function (value, index) {
                    if (value >= 10000 && value < 10000000) {
                        value = value / 10000 + "万";
                    } else if (value >= 10000000 && value < 100000000) {
                        value = value / 10000000 + "千万";
                    } else if (value >= 100000000) {
                        value = value / 100000000 + "亿";
                    }
                    return value;
                },
            },
            tooltip: {
                trigger: "axis",
            },
            legend: {
                data: state.dataTitle,
                right: 13,
            },
            color: [
                "#63caff",
                "#49beff",
                "#03387a",
                "#03387a",
                "#03387a",
                "#6c93ee",
                "#a9abff",
                "#f7a23f",
                "#27bae7",
                "#ff6d9d",
                "#cb79ff",
                "#f95b5a",
                "#ccaf27",
                "#38b99c",
                "#93d0ff",
                "#bd74e0",
                "#fd77da",
                "#dea700",
            ],
            xAxis: {
                type: "category",
                data: state.eChartData.dataTime,
            },
            yAxis: {
                type: "value",
            },
            series: [
                {
                    name: state.dataTitle[0],
                    type: "line",
                    label: {
                        show: true,
                        position: "top",
                    },
                    data: state.eChartData.data,
                    itemStyle: {
                        color: "#febb50",
                    },
                },
                {
                    name: state.dataTitle[1],
                    type: "line",
                    label: {
                        show: true,
                        position: "top",
                    },
                    data: state.eChartData.dataOver,
                    itemStyle: {
                        color: "#63caff",
                    },

                },
            ],
        };
        //判断是否添加单位
        if (state.dataUnit[0]) {
            option.series[0].label["formatter"] = `{c}${state.dataUnit[0]}`;
        }
        if (state.dataUnit[1]) {
            option.series[1].label["formatter"] = `{c}${state.dataUnit[1]}`;
        }
        chart.setOption(option);
        state.charts.push(chart);
    }

    // 批量设置 echarts resize
    const initEchartsResizeFun = () => {
        nextTick(() => {
            for (let i = 0; i < state.charts.length; i++) {
                state.charts[i].resize();
            }
        });
    };
    // 批量设置 echarts resize
    const initEchartsResize = () => {
        window.addEventListener("resize", initEchartsResizeFun);
    };

    const initData = () => {
        state.url = props.url;
        state.queryJson = props.queryJson;
        state.dataTitle = props.dataTitle;
        state.chartTitle = props.chartTitle;
        state.dataUnit = props.dataUnit;
    }
    const init = () => {
        initData();
        getData();
        initEchartsResize();
    }
    onMounted(() => {
        init();
    });
    // 由于页面缓存原因，keep-alive
    onActivated(() => {
        initEchartsResizeFun();
    });
    // 监听 vuex 中的 tagsview 开启全屏变化，重新 resize 图表，防止不出现/大小不变等
    watch(
        () => [props.dataTitle, store.state.tagsViewRoutes.isTagsViewCurrenFull],
        () => {
            init();
            initEchartsResizeFun();
        }
    );
    defineExpose({
        init
    });
</script>
<style lang="scss">
    .chartH {
        height: 200px;
    }

    .selectStyle {
        float: right;
    }

    .mt15 {
        font-size: 18px;
    }

    .chartTitleStyle {
        font-size: 15px;
        font-weight: bold;
    }
</style>

